* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;

  p {
    margin-bottom: 0px;
  }
}

.App {
  .footerBar {
    width: 100%;
    height: 1.173rem;
    background: #eee;
    position: fixed;
    bottom: 0;

    >div {
      height: 100%;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;

      >a {
        color: #000;

        >P {
          margin-bottom: 0;
        }

        &.footerActive {
          color: red;

          >p {
            margin: 0;
          }

          &.footerActive {
            color: red
          }
        }

      }
    }
  }

  // 轮播图
  .banner {
    img {
      width: 100%;
      height: 5.333333rem;
    }
  }

  // 详情
  .particulars {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 400;
    background-color: #EEEEEE;

    .collectactive {
      color: red;
    }

    .particularsTop {
      width: 100%;
      height: calc(100vh - 1.6rem);
      overflow: auto;
    }

    .particularsBack {
      width: .8rem;
      height: .8rem;
      position: fixed;
      left: 5%;
      top: 3%;
      z-index: 600;
      color: #FFF;
      background: #00000049;

      svg {
        font-size: .64rem;
        font-weight: 800;
        margin-top: .133333rem;
      }
    }

    .particularsMain {
      margin-top: 10px;
      background-color: #FFF;
      border-radius: .693333rem;
      box-sizing: border-box;
      padding: 0 .533333rem;

      h2 {
        width: 100%;
        padding: .533333rem 0;
      }

      .particularsMain_price {
        width: 100%;
        height: auto;

        span {
          color: #999;
          font-size: .32rem;
          margin-right: .506667rem;
        }

        .money {
          color: #E06833;
          font-size: .32rem;
        }
      }

      .particulars_course_intro {
        font-size: .32rem;
        color: #999;
        margin: .266667rem 0;
      }

      .particulars_course_footer {
        width: 100%;
        height: auto;
        margin-bottom: .8rem;

        .lecturer {
          width: 100%;
          height: 4.8rem;
          border-bottom: 1px solid #eee;

          >p {
            height: 1.6rem;
            line-height: 1.6rem;
            text-align: left;
            font-weight: 600;
          }

          .lecturerCon {
            width: 100%;
            height: 3.2rem;

            .lecturerCon_left {
              width: 2.293333rem;
              height: 2.293333rem;
              float: left;

              img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
              }
            }

            .lecturerCon_rig {
              float: left;
              width: calc(100% - 2.293333rem);
              box-sizing: border-box;
              padding: 0 .48rem;

              h3 {
                line-height: 1.173333rem;
                height: 1.173333rem;
              }

              >p {
                font-size: .32rem;
                color: #9999;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;

              }
            }
          }
        }

        .courseDescription {
          width: 100%;
          margin-top: .266667rem;

          p {
            width: 100%;
            height: 1.066667rem;
            line-height: 1.066667rem;
            font-weight: 600;
          }

          img {
            width: 100%;
            margin-bottom: .266667rem;
          }
        }
      }

    }

    .particulars_foot {
      width: 100%;
      height: 1.6rem;
      background-color: #FFF;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
      text-align: center;
      box-shadow: 0 -1px 0 #ededed;
      border-top-left-radius: .266667rem;
      border-top-right-radius: .266667rem;

      .shopCars {
        position: relative;

        .shopcarNum {
          width: .4rem;
          height: .533333rem;
          border-radius: .266667rem;
          background: #E06833;
          color: #FFF;
          position: absolute;
          left: .8rem;
          top: -0.133333rem;
          text-align: center;
          line-height: .533333rem;
        }
      }

      p {
        margin: 0;
        padding: 0;
      }

      .purchaseNow {
        padding: .133333rem .533333rem;
      }

      .addCar {
        background: #45c4ff;
        border: 1px solid #45c4ff;
      }
    }
  }

  // 确认订单
  .confirmOrder {
    width: 100%;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 400;
    background: #EEEEEE;

    >h2 {
      width: 100%;
      height: 1.6rem;
      margin: 0;
      text-align: center;
      line-height: 1.6rem;
      background: #FFF;
    
      box-sizing: border-box;
      padding: 0 .426667rem;

      span {
        float: left;

        svg {
          font-size: .64rem;
          margin-top: .48rem;
          font-weight: 600;
        }
      }
    }

    .orderMain {
      width: 100%;
      height: calc(100vh - 3.333333rem);
      box-sizing: border-box;
      padding: .533333rem;
      overflow: auto;

      .orderMsg {
        width: 100%;
        box-sizing: border-box;
        padding: .4rem;
        height: 3.626667rem;
        background: #FFF;
        border-radius: .266667rem;

        .ordertit {
          width: 100%;
          display: flex;
          justify-content: space-between;

          h2 {
            font-weight: 600;
          }

          span {
            color: #999;
            font-size: .32rem;

            >b {
              color: #E06833;
            }
          }
        }

        .orderUser {
          width: 100%;
          font-size: .32rem;
          color: #999;
        }

        .modePayment {
          width: 100%;
          height: 1.6rem;
          line-height: 1.6rem;
          display: flex;
          justify-content: space-between;

          span {
            font-size: .32rem;

            &:nth-child(2) {
              color: #1fb8ff;
            }
          }
        }
      }

      .discounts {
        width: 100%;
        box-sizing: border-box;
        padding: .4rem .4rem .8rem .4rem;
        min-height: 6.133333rem;
        background: #FFF;
        border-radius: .266667rem;
        margin-top: .4rem;
        position: relative;

        p {
          width: 100%;
          margin: 0;
          height: 1.333333rem;
          line-height: 1.333333rem;

          &:last-child {
            margin-bottom: .533333rem;

          }

          // display: flex;
          span {
            float: left;

            &:nth-child(1) {
              width: .586667rem;
              height: .586667rem;
              background: red;
              color: #FFF;
              text-align: center;
              line-height: .586667rem;
              font-size: .32rem;
              margin-top: .373333rem;
              margin-right: .266667rem;
            }

            &.OrderRig {
              float: right !important;
            }

            svg {
              margin-top: .45rem;
            }
          }

        }

        .discountsExplain {
          width: 100%;
          height: .8rem;
          line-height: .8rem;
          display: flex;
          font-size: 12px;
          color: #999;
          justify-content: space-between;
          position: absolute;
          left: 0;
          bottom: 0;
          overflow: hidden;
          padding: 0 .8rem;

          span {
            b {
              color: red;
              font-weight: 400;
            }
          }
        }
      }
    }

    .orderFoot {
      width: 100%;
      height: 1.733333rem;
      background: #FFF;
      position: absolute;
      left: 0;
      bottom: 0;
      display: flex;
      box-sizing: border-box;
      padding: 0 .533333rem;
      justify-content: space-between;

      p {
        &:nth-child(1) {
          display: flex;
          line-height: .85rem;
          flex-direction: column;
          justify-content: space-between;

          span {
            b {
              font-weight: 500;
              color: #E06833;
            }

            &:nth-child(2) {
              color: #999;
            }
          }
        }

        .orderFootBtn {
          margin-top: .533333rem;
          border-radius: .4rem;
          padding: 0 50px;
        }
      }
    }

  }

  // 确认支付方式弹框
  .Orderlayer {

    .WeChat {
      width: 100%;
      height: 1.333333rem;
      margin: 0;

      .wechatRig {
        float: right;
      }

      svg {
        font-size: .64rem;
        color: #B0CEB9 !important;
        padding-top: .266667rem;
        float: left;
      }

      line-height:1.333333rem;
    }

    .Alipay {
      width: 100%;
      height: 1.333333rem;
      margin: 0;

      .alipayRig {
        float: right;
      }

      svg {
        font-size: .64rem;
        color: #7CC2FB !important;
        padding-top: .266667rem;
        float: left;
        // color: ;
      }

      line-height:1.333333rem;
    }
  }

  // 购物车
  .car {
    >h2 {
      width: 100%;
      height: 1.6rem;
      margin: 0;
      text-align: center;
      line-height: 1.6rem;
      background: #FFF;
      box-sizing: border-box;
      padding: 0 .426667rem;
      box-shadow: 0 .026667rem 0 #f3f3f3;

      span {
        float: left;

        svg {
          font-size: .64rem;
          margin-top: .48rem;
          font-weight: 600;
        }
      }
    }

    .imgs {
      width: 1.6rem;
      height: 1.6rem;
      border-radius: .266667rem;
    }

    input{
      margin:0 .266667rem;
    }

    .checkall {
      width: 100%;
      height: 1.6rem;
      line-height: 1.6rem;
      position:absolute;
      left:0;
      bottom:1.066667rem;
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      padding:0 .266667rem;
      
      .checked {
        margin: 0 .133333rem;
      }
      .btn{
        margin-top:.4rem;
      }
    }

    .intro {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
      margin-top: .266667rem;
    }

    .calculate {
      width: 2.666667rem;
      padding-left:.266667rem;
      .prices {
        width: 1.066667rem;
        color: #E06833;

      }

      span {
        b {
          display: inline-block;
          width: .666667rem;
          height: .666667rem;
          text-align: center;
          line-height: .666667rem;
          border: .026667rem solid #f3f3f3;

          &:nth-child(2) {
            border: none;
          }
        }
      }
    }

  }
}